<template>
    <view style="padding-top: 100rpx;">
        <view class="text-area">
            <text>输入值：</text><input type="text" v-model="title" style="color: red; background-color: gray;" />
        </view>
        <view class="text-area">
            <text>回传值：</text><input type="text" :value="callBackValue" style="background-color: gray; color: yellow;"/>
        </view>
        <componentA :intent="title"></componentA>
		<componentB @callBackFun="callBack"></componentB>
    </view>
</template>

<script>
	import componentA from '../../../components/componentA.vue';
	import componentB from '../../../components/componentB.vue';
	export default {
	    data() {
	        return {
	            title: '',
	            callBackValue: ''
	        }
	    },
	    components:{
	        componentA,
	        componentB
	    },
	    methods: {
	        callBack(val) {
	            this.callBackValue = val;
	        }
	    }
	}
</script>

<style>
.text-area {
    margin-bottom: 20rpx;
	 
	display: flex;
}
</style>
